<template>
  <transition :name="closeTransition ? '' : 'at-zoom-in-center'">
    <span
      class="at-tag"
      :class="[type ? 'at-tag--' + type : '']"
      :style="{backgroundColor: color}"
      @click="handleClick">
      <slot></slot>
      <i class="at-tag__close at-icon-close"
        v-if="closable"
        @click="handleClose"></i>
    </span>
  </transition>
</template>
<script>
/**
 *@author 陈杨
 */
  export default {
    name: 'at-tag',
    props: {
/**
 *@type {string} text 标签文本
 */
      text: String,
/**
 *@type {Boolean} closable 标签是否可关闭
 */
      closable: Boolean,
/**
 *@type {string} type 主题（颜色）
 */
      type: String,
/**
 *@type {Boolean} closeTransition 是否禁用渐变动画
 */
      closeTransition: Boolean,
/**
 *@type {string} color 背景色
 */
      color: String
    },
    methods: {
/**
 *@description 关闭tag标签
 *触发自定义事件close
 */
      handleClose(event) {
        this.$emit('close', event);
      },
      handleClick(evt) {
        this.$emit('click', evt);
      },
    }
  };
</script>
